<script>
import axios from "axios";
import {getBaseUrl} from "@/js/common.js";
import MyBinItem from "@/components/user/MyBinItem.vue";

export default {
  name: "MyBinPage",
  components: {MyBinItem},
  data() {
    return {
      dataList: [],
      current: 1,
      size: 12,
      total: 0
    }
  },
  mounted() {
    this.getDataList()
  },
  watch: {
    current(){
      this.getDataList()
    }
  },
  methods: {
    getDataList(){
      axios.post(getBaseUrl('blogHandle') + '/blog/pageMyBin', {
        current: this.current,
        size: this.size,
        blogTitle: this.title
      }, {headers: {massToken: sessionStorage.getItem('massToken')}}).then(res => {
        this.dataList = res.data.data.records
        this.total = res.data.data.total
      })
    }
  }
}
</script>

<template>
  <div class="home-content">
    <div v-if="dataList.length > 0">
      <el-row v-for="rowIndex in Math.ceil(dataList.length/3)" :key="rowIndex">
        <el-col v-for="colIndex in 3" :key="colIndex" span="8" style="padding: 30px">
          <MyBinItem v-if="(rowIndex-1)*3+colIndex-1 < dataList.length"  :blog="dataList[(rowIndex-1)*3+colIndex-1]" @get-data-list="getDataList" />
        </el-col>
      </el-row>
      <div style="display: flex;justify-content: center">
        <el-pagination
          background
          layout="prev, pager, next"
          :total="total"
          v-model:current-page="current"
        />
      </div>
    </div>
  </div>
</template>

<style scoped>
.home-content{
  display: flex;
  justify-content: center;
}
</style>
